import React from 'react'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { connect } from 'react-redux'
import { loginFn } from './../../api/user'
import { useHistory, useLocation } from 'react-router-dom'
function Com(props) {
  const history = useHistory()
  const { search } = useLocation()
  console.log('search', search)
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    props.login(values).then(() => {
      const redirect = search.split('?redirect=')[1]
      redirect ? history.push(redirect) : history.push('/')
      // redirect ? window.location.href="/#/" + redirect :  window.location.href="/#/"

    })
  };

  return (
    <div id="components-form-demo-normal-login" >
      <h1>嗨购管理系统</h1>
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <Form.Item
        name="adminname"
        rules={[
          {
            required: true,
            message: '请输入管理员账户',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="管理员账户" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码!',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="密码"
        />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          登 录
        </Button>
      </Form.Item>
    </Form>
  
    </div>
  )
}

export default connect(
  null,
  dispatch => ({
    login (params) {
      return new Promise(resolve => {
        loginFn(params).then(res => {
          console.log('login', res.data)
          if (res.data.code === '10005') {
            message.error('账户名未注册')
          } else if (res.data.code === '10003') {
            message.error('密码错误')
          } else {
            message.success('登录成功')
            localStorage.setItem('loginState', true)
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('adminname', res.data.data.adminname)
            localStorage.setItem('role', res.data.data.role)
            localStorage.setItem('checkedkeys', JSON.stringify(res.data.data.checkedkeys))
            dispatch({ type: 'CHANGE_LOGIN_STATE', payload: true })
            dispatch({ type: 'CHANGE_ADMIN_NAME', payload: res.data.data.adminname })
            dispatch({ type: 'CHANGE_TOKEN', payload: res.data.data.token })
            dispatch({ type: 'CHANGE_ROLE', payload: res.data.data.role })
            dispatch({ type: 'CHANGE_CHECKEDKEYS', payload: res.data.data.checkedkeys })
            // 跳转至系统的首页
            // 应该交给展示组件处理
            resolve()
          }
        })
      })
    }
  })
)(Com)


